<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=2,minimum-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" href="css/tg_mobile_reset.css">
	<title>vue 三级联动</title>
	<style>
		#test {
			margin: 20px auto;
		}
		#test .fl {
			float: left;
			position: relative;
		}
		#test .fl {
		    width: 80px;
		    height: 30px;
		    line-height: 30px;
		    border: 1px solid #ccc;
		    text-align: center;
		}
		#test .sel {
			margin-right: 12px;
			width: 90px;
			height: 30px;
			margin-left: 5px;
			border: none;

		}
		.sel select {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			outline: none;
		}
	</style>
</head>
<body>
	
	<div id="test" class="clearfix">
		<div class="sel fl">
			<select v-show="curShow===0">
				<option value="0">请选择</option>
			</select>
			<select v-show="curShow===1">
				<option value="0">请选择</option>
			</select>
			<select v-show="curShow===2">
				<option value="0">请选择</option>
			</select>
		</div>
		
		<div class="fl cnt">
			<div></div>
		</div>
		<div class="fl cnt">

		</div>
		<div class="fl cnt">

		</div>
		
	</div>


	<script src="./lib/rem.js"></script>
	<script src="./lib/vue.min.js"></script>
	<script>
		var test = new Vue({
			el:'#test',
			data:{
				curShow:1
			}
		})
	</script>
</body>
</html>